<template>
  <div class="box">

    <!-- 标题 -->
    <div class="header">
      <span>购物清单</span>
    </div>

    <!-- 类型 -->
    <div class="type">
      <div class="small"><input type="radio" @click="checkAll">全选</div>
      <div class="big">商品</div>
      <div class="small">数量</div>
      <div class="small">单价(元)</div>
      <div class="small">金额(元)</div>
      <div class="small">操作</div>
    </div>
  

    <!-- 商品列表 -->
    <ul >
      <li v-for="(good, index) in goods" :key="good.id">
        <div class="small"><input type="checkbox" :checked="good.yes" v-model="good.yes"></div>
        <div class="big">{{ good.content }}</div>
        <div class="small">
          <button @click="good.number++">+</button>
          <span style="margin: 0 5px;">{{ good.number }}</span>
          <button @click="good.number--">-</button>
        </div>
        <div class="small">￥{{ good.price }}</div>
        <div class="small">￥{{ good.sum }}</div>
        <div class="small" @click="del(index)">删除</div>
      </li>
    </ul>

    <!-- 底部 -->
    <div class="footer">
      <div style="margin-left: 10px;" @click="delSeclet">删除所选商品</div>
      <div class="right">
        <div>{{ numberAll }}</div>
        <div>件商品总计(不含运费)：</div>
        <div>￥{{ sumAll }}</div>
        <div class="last">去结算</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const content = ref()
const number = ref()
const numberAll = computed(() => {
  return goods.value.reduce((total, good) => total + good.number,0)
})
const price = ref()
const sum = computed(() => {
  return number.value * price.value
})
const sumAll = computed(() => {
  return goods.value.reduce((total, good) => total + good.sum,0)
})
const goods = ref([
  {id: 1, content: '苹果', number: 1, price: 100, sum: sum},
  {id: 2, content: '香蕉', number: 2, price: 200, sum: sum}
])

// 计算总金额
goods.value.forEach(good => {
  good.sum = computed(() => good.number * good.price)
})

// 删除
const del = (index) => {
  goods.value.splice(index, 1)
}

// 全选
let isAll = false
const checkAll = () => {
    isAll = !isAll
    goods.value.forEach(good => {
        good.yes = isAll
    })
}

// 批量删除
const delSeclet = () => {
  goods.value = goods.value.filter(good =>!good.yes)
}


</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 800px;
  height: 300px;
  border: 2px solid #827171;
}

.header {
  height: 50px;
  width: 800px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.type {
  height: 70px;
  width: 800px;
  border-top: 1px solid #827171;
  border-bottom: 1px solid #827171;
  display: flex;
}

.big, .small {
  height: 70px;
  border: 1px solid #827171;
  display: flex;
  justify-content: center;
  align-items: center;
}

.big {
  width: 300px;
}
.small {
  width: 100px;
}

li {
  display: flex;
}

.footer {
  height: 40px;
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right {
  display: flex;
  align-items: center;
}

.last {
  height: 40px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}


</style>